<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

   <!-- 01 准备容器 -->
   <div id="app"></div>

   <!-- 02 引入react 开发相关库 注意顺序 -->
   <script src="../js/react.development.js"></script>
   <script src="../js/react-dom.development.js"></script>
   <script src="../js/babel.min.js"></script>
  
    <script type="text/babel">
        
        // class Table extends React.Component{
        //     render(){
        //         return (
        //             <table>
        //                 <tr>
        //                     <td>hello</td>
        //                     <td>world</td>
        //                 </tr>
        //             </table>
        //         )
        //     }
        // }


        // function Coloum(){
        //     return (
        //         <div>
        //             <td>hello</td>
        //             <td>world</td>
        //         </div>
        //     )
        // }


        // 子元素分组 ： 不添加额外DOM 节点
        // function Coloum(){
        //     return (
        //         <React.Fragment>
        //             <td>hello</td>
        //             <td>world</td>
        //         </React.Fragment>
        //     )
        // }
        
        // TODO ？
        function Coloum(){
            return (
                <>
                    <td>hello</td>
                    <td>world</td>
                </>
            )
        }


        class Table extends React.Component{
            render(){
                return (
                    <table>
                        <tbody>
                            <tr>
                                <Coloum />
                            </tr>
                        </tbody>
                    </table>
                )
           }
        }

        // const e = <Table />

        const posts =[
            {id:1,title:'a',content:'a-content'},
            {id:2,title:'b',content:'b-content'},
            {id:3,title:'c',content:'c-content'},
        ]


        // function  PostList(props){
        //     const {posts} = props
        //     return (
        //         <dl>
        //             {
        //                 posts.map(item=>(
        //                     <React.Fragment key={item.id}>
        //                         <dt>{item.title}</dt>
        //                         <dd>{item.content}</dd>
        //                     </React.Fragment>
        //                 )) 
        //             }    
        //         </dl>
        //     )
        // }


        // 注意 ： <></> 不支持key
        // function  PostList(props){
        //     const {posts} = props
        //     return (
        //         <dl>
        //             {
        //                 posts.map(item=>(
        //                     < key={item.id}>
        //                         <dt>{item.title}</dt>
        //                         <dd>{item.content}</dd>
        //                     </>
        //                 )) 
        //             }    
        //         </dl>
        //     )
        // }

        const e  = <PostList posts={posts} />

        ReactDOM.render(e,document.getElementById('app'))
    </script>
</body>
</html>